<div class="main-section">
    <h1 class="main-section__title">Button</h1>

    <p class="main-section__intro">
        <code>lx-button</code> is a directive that creates a link element if you specify a <code>href</code> or <code>ng-href</code> attribute.<br />
        Otherwise, it creates a button element.
    </p>

    <lx-component lx-title="Types" lx-path="/includes/modules/button/includes/type.html">
        Four different types of buttons are available: <code>raised</code>, <code>flat</code>, <code>fab</code> and <code>icon</code>.
    </lx-component>

    <lx-component lx-title="Disabled state" lx-path="/includes/modules/button/includes/state.html">
        Disabled style will automatically be applied when using <code>ng-disabled</code> or <code>disabled</code> attribute.
    </lx-component>

    <lx-component lx-title="Sizes" lx-path="/includes/modules/button/includes/size.html">
        Five different sizes are available and defined in <code>dist/scss/core/settings/defaults.scss</code>
    </lx-component>

    <lx-component lx-title="Main colors" lx-path="/includes/modules/button/includes/color.html">
        Main colors defined in <code>dist/scss/core/settings/defaults.scss</code> can be used to create colored buttons.<br />
        Text/icon and ripple colors will be automatically set according to the color.
    </lx-component>

    <lx-component lx-title="Custom colors" lx-path="/includes/modules/button/includes/custom-color.html">
        A fully customizable button can be created with a regular <code>button</code> element.<br />
        Background and text colors are applied with css helpers.
    </lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-color</td>
                    <td><code>string</code></td>
                    <td><code>primary</code></td>
                    <td>Define the button color. Options: colors defined in colors section in <code>dist/scss/core/settings/defaults.scss</code></td>
                </tr>
                <tr>
                    <td>lx-size</td>
                    <td><code>string</code></td>
                    <td><code>m</code></td>
                    <td>Define the button size. Options: <code>xs</code>, <code>s</code>, <code>m</code>, <code>l</code>, <code>xl</code></td>
                </tr>
                <tr>
                    <td>lx-type</td>
                    <td><code>string</code></td>
                    <td><code>raised</code></td>
                    <td>Define the button type. Options: <code>raised</code>, <code>flat</code>, <code>fab</code>, <code>icon</code></td>
                </tr>
                <tr>
                    <td>ng-*</td>
                    <td></td>
                    <td></td>
                    <td>All angular directives are available as the directive generates a regular link or button element.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>
</div>
